{% apply inky_to_html|inline_css(source('@css/foundation-emails.css'))|inline_css %}
    {% set theme =  getThemeProperties(room is defined?room:null) %}
    <style type="text/css">

        body,
        html,
        .body {
            background: #f3f3f3 !important;
        }

        .container.header {
            background: #f3f3f3;
        }


        {% if theme %}

        a {
            color: {{theme.emailLinkcolor}};
            text-decoration: none;
        }

        a:hover {
            color: {{theme.emailLinkcolor}};
        }

        a:active {
            color: {{theme.emailLinkcolor}};
        }

        a:visited {
            color: {{theme.emailLinkcolor}};
        }

        h1 a,
        h1 a:visited,
        h2 a,
        h2 a:visited,
        h3 a,
        h3 a:visited,
        h4 a,
        h4 a:visited,
        h5 a,
        h5 a:visited,
        h6 a,
        h6 a:visited {
            color: {{theme.emailLinkcolor}};
        }



        .body-border {
            border-top: 8px solid {{theme.emailColor}};
        }


        {% else %}
        a {
            color: #2199e8;
            text-decoration: none;
        }

        a:hover {
            color: #147dc2;
        }

        a:active {
            color: #147dc2;
        }

        a:visited {
            color: #2199e8;
        }

        h1 a,
        h1 a:visited,
        h2 a,
        h2 a:visited,
        h3 a,
        h3 a:visited,
        h4 a,
        h4 a:visited,
        h5 a,
        h5 a:visited,
        h6 a,
        h6 a:visited {
            color: #2199e8;
        }

        .body-border {
            border-top: 8px solid #ff002a;
        }

        {% endif %}

    </style>
    {% if room is defined and server is not defined %}
        {% set server = room.server %}
    {% endif %}


    <spacer size="16"></spacer>

    <container class="header">
        <row>
            <columns>
                <h1 class="text-center">
                    {% if theme is not null and theme.logo is defined and theme.logo is not null %}
                    <img width="300" style="max-width: 300px; margin-bottom: 30px" alt="Company Logo" src="{{ httpsAbolutUrl(theme.logo,room is defined?room:null) }}">
                        <hr>
                    {% endif %}
                    {% if server is defined and  server is not null and server.serverEmailHeader is not null %}
                        {{ server.serverEmailHeader }}
                    {% endif %}
                        
                    {% block header %}

                    {% endblock %}

                </h1>

            </columns>
        </row>
    </container>

    <container class="body-border">
        <row>
            <columns>
                <spacer size="32"></spacer>

                <spacer size="16"></spacer>
                {% block content %}

                {% endblock %}
                <spacer size="16"></spacer>
                <p style="text-align: center">
                    <b>{{ 'Wichtig: Leiten Sie diese E-Mail nicht weiter. Alle Links in dieser E-Mail sind personalisiert und nur für Sie gültig. Wollen Sie weitere Personen zu dieser Konferenz einladen, antworten Sie auf diese E-Mail mit der E-Mail-Adresse der Person.'|trans}} </b>
                </p>
                <spacer size="16"></spacer>
                <center>
                    {% if laF_emailTextLogin == 1 %}
                        <p style="text-align: center">
                            {% if theme is not null %}
                                {% trans with {'{url}': httpsAbolutUrl(path('dashboard'),room is defined?room:null)} %}Sie wollen diese Konferenz komfortabel in einer Übersicht verwalten?
                                    <br>
                                    Dann melden Sie sich <a href="{url}">hier</a>&nbsp;an.
                                {% endtrans %}
                            {% else %}
                                {% trans with {'{url}':httpsAbolutUrl(path('dashboard'),room is defined?room:null)} %}Sie wollen selber eine Videokonferenz
                                    <b>kostenlos</b> planen oder diese Konferenz komfortabel
                                                     in einer Übersicht verwalten?<br>
                                    Dann melden Sie sich <a href="{url}">hier</a>&nbsp;<b>kostenlos</b>
                                    an.
                                {% endtrans %}
                            {% endif %}
                        </p>
                    {% endif %}

                </center>
                <spacer size="16"></spacer>
                <p>
                    {% if room is defined %}
                        {{ 'Sie erhalten diese E-Mail, da Sie auf der Teilnehmerliste von dieser Konferenz stehen.'|trans }}
                    {% else %}
                        {{ 'Sie erhalten diese E-Mail, da Sie zu einem Jitsi Server hinzugefügt wurden.'|trans }}
                    {% endif %}
                </p>
                <spacer size="32"></spacer>

                <p style="text-align: center">
                    {% if room is defined %}
                        {% trans %}Diese Mail wurde Ihnen gesendet im Auftrag von:{% endtrans %}<br>
                        {{ nameOfUserwithFormat(room.moderator, laf_showNameFrontend) }}
                    {% endif %}
                </p>
                <hr>
                <spacer size="32"></spacer>
                {% if user is defined and user is not null and user.uid is not null %}
                    <p style="text-align: center">{{ 'email.ical.link'|trans }}</p>
                    <p style="text-align: center">{{ httpsAbolutUrl(path('ical',{ 'id':user.uid }),room is defined?room:null) }}</p>
                    <p style="text-align: center"><a
                                href="https://github.com/H2-invent/jitsi-admin/wiki/Add-iCal-Link-to-your-personal-calendar-like-Outlook,-Gmail-etc.-(German)">{{ 'Hilfe'|trans }}</a>
                    </p>
                {% endif %}


            </columns>
        </row>
        <center>
            <small>
                {% if theme %}
                    <a href="{{ theme.emailFooterLink }}"> {{ theme.emailFooterText }}</a>
                {% else %}
                    <a href="https://jitsi-admin.de">{{ 'Powered by Jitsi Admin, die Open Source Jitsi Planer Software'|trans }}</a> |
                    <a href="{{ dataPrivacy }}">{{ 'Datenschutzhinweis'|trans }} Jitsi Admin</a>
                {% endif %}

            </small>
        </center>

    </container>
{% endapply %}
